<template>
  	<div class="recommend">
  		<div class="title">热销推荐</div>
  		<ul>
  			<router-link
  				tag="li"
  				class="item"
  				v-for="item of list"
  				:key="item.id"
  				:to="/detail/+item.id">
  				<img :src="item.imgUrl" class="item-img">
  				<div class="item-info">
  					<p class="item-title">{{item.title}}</p>
  					<p class="item-desc">{{item.desc}}</p>
  					<P class="item-price">&yen;{{item.price}}</P>
  					<P class="item-addr">{{item.addr}}</P>
  				</div>
  			</router-link>
  		</ul>
 	</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
  	list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
	.recommend
		background:#fff;
	.title
		line-height:.8rem
		margin-top:.2rem
		text-indent: .2rem
	.item
		display: flex
		height: 2rem
		overflow: hidden
		border-top: .02rem solid #ddd
		.item-img
			width: 1.7rem
			height: 1.7rem
			padding: .15rem
		.item-info
			flex:1
			min-width: 0
			position: relative
			padding: .1rem
			.item-title
				line-height: .54rem
				font-size: .32rem
				ellipsisnowrap()
			.item-desc
				line-height: .4rem
				color: #ccc
				height:.4rem
				ellipsisnowrap()
			.item-price
				position: absolute
				line-height:.44rem
				color: #ff9300
				bottom: .2rem
				left: .1rem
				font-size:.4rem
			.item-addr
				position: absolute
				line-height: .44rem
				bottom: .2rem
				right: .2rem
				color: $777
				width: 1rem
				text-aligin:center
				ellipsisnowrap()
				border-radius: .06rem
</style>
